<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

#wrap {
	width: 500px;
	height: 500px;
	border: 1px solid blue;
	margin: 100px auto;
}

#selectBoard {
	width: 300px;
	height: 20px;
	border: 1px solid black;
	border-radius: 5px;
	position: relative;
	margin: 30px auto;
}

#selectBoard ul {
	width: 300px;
	background: white;
	position: absolute;
	top: -10px;
	left: -10px;
	border: 1px solid red;
	border-radius: 5px;
	display: none;
}

#selectBoard ul li {
	list-style: none;
}

#selectBoard ul li:hover {
	background: dodgerblue;
}

#selectBoard img {
	position: absolute;
	right: 0;
	top: 0;
	width: 30px;
}
</style>

</head>

<body>

	<div id="wrap">

		<div id="selectBoard">

			<ul>

				<li><input type="checkbox" name="" id="" value="北京" />北京</li>

				<li><input type="checkbox" name="" id="" value="上海" />上海</li>

				<li><input type="checkbox" name="" id="" value="西安" />西安</li>

				<li><input type="checkbox" name="" id="" value="石家庄" />石家庄</li>

			</ul>

			<span id="shuju"></span>

		</div>

	</div>

</body>

</html>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

//定义一个空数组去接收value值

 var arr = []; 

//仿select的点击事件

 $("#selectBoard").click(function(event){

  var ev = event || window.event;



  if (ev.stopPropagation) {

   ev.stopPropagation();

  }else{

   ev.cancelable = true;

  }

  $("#selectBoard ul").css("display","block");

 });

 

 $(window).click(function(){

  $("#selectBoard ul").css("display","none");

 });

 //监听checkbox的value值 改变则执行下列操作

 $("input").change(function(){

  if ($(this).prop("checked")) {

   arr.push($(this).val()+",");

   console.log(arr);

  }else{

   arr.shift($(this).val()+",");

  }

  $("#shuju").html(arr);

 });

</script>
</html>